import React from 'react'
import PropTypes from 'prop-types'
import {
  inject,
  observer,
} from 'mobx-react'

import Button from 'material-ui/Button'
import TextField from 'material-ui/TextField'
import { withStyles } from 'material-ui/styles'

import UserWrapper from './user'
import loginStyle from './styles/login'

@inject(stores => ({
  appState: stores.appState,
})) @observer

class Login extends React.Component {
  constructor() {
    super()

    this.state = {
      token: '',
      helpText: '',
    }

    this.tokenChange = this.tokenChange.bind(this)
    this.loginClick = this.loginClick.bind(this)
  }

  componentDidMount() {

  }

  tokenChange(e) {
    this.setState({
      token: e.target.value.trim(),
    })
  }

  loginClick() {
    if (!this.state.token) {
      return this.setState({
        helpText: '必须输入',
      })
    }

    this.setState({
      helpText: '',
    })

    return this.props.appState.login(this.state.token)
  }

  render() {
    const { classes } = this.props

    return (
      <UserWrapper>
        <div className={classes.root}>
          <div className={classes.input}>
            <TextField
              required
              id="accossToken"
              label="请输入accessToken"
              placeholder="请输入accessToken"
              helperText={this.state.helpText}
              value={this.state.token}
              onChange={this.tokenChange}
            />
          </div>
          <div className={classes.button}>
            <Button
              variant="raised"
              color="primary"
              onClick={this.loginClick}
            >
              登录
            </Button>
          </div>
        </div>
      </UserWrapper>
    )
  }
}

Login.wrappedComponent.propTypes = {
  appState: PropTypes.object.isRequired,
}

Login.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(loginStyle)(Login)
